<cnsl-create-layout
  title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
  (closed)="close()"
>
  <div class="identity-provider-create-content">
    <div class="identity-provider-title-row">
      <img class="idp-logo" src="./assets/images/idp/saml-icon.svg" alt="saml" />
      <h1>{{ 'IDP.CREATE.SAML.TITLE' | translate }}</h1>
      <ng-container *ngIf="exists$ | async">
        <div
          *ngIf="{ isNotActive: (activateLink$ | async) } as idp"
          class="cnsl-state-dot"
          [matTooltip]="(idp.isNotActive ? 'IDP.STATES.2' : 'IDP.STATES.1') | translate"
          [ngClass]="{ active: !idp.isNotActive, inactive: !!idp.isNotActive }"
        ></div>
      </ng-container>
      <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
    </div>

    <cnsl-provider-next
      [configureProvider]="(exists$ | async) === true"
      [configureTitle]="'DESCRIPTIONS.SETTINGS.IDPS.SAML.TITLE' | translate"
      [configureDescription]="'DESCRIPTIONS.SETTINGS.IDPS.SAML.DESCRIPTION' | translate"
      configureLink="https://zitadel.com/docs/guides/integrate/identity-providers/mocksaml"
      [autofillLink]="autofillLink$ | async"
      [activateLink]="activateLink$ | async"
      [copyUrls]="copyUrls$ | async"
      [expanded]="!!(expandWhatNow$ | async)"
      (activate)="activate()"
    ></cnsl-provider-next>

    <p class="identity-provider-desc cnsl-secondary-text">
      {{ !provider ? ('IDP.CREATE.SAML.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
    </p>

    <form [formGroup]="form" (ngSubmit)="submitForm()">
      <div class="identity-provider-content">
        <cnsl-form-field class="formfield">
          <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
          <input cnslInput formControlName="name" />
        </cnsl-form-field>
        <cnsl-form-field class="formfield">
          <cnsl-label>{{ 'IDP.SAML.METADATAXML' | translate }}</cnsl-label>
          <textarea
            cnslInput
            formControlName="metadataXml"
            placeholder="base64 encoded metadata xml"
            class="metadata-xml"
          ></textarea>
        </cnsl-form-field>
        <cnsl-form-field class="formfield">
          <cnsl-label>{{ 'IDP.SAML.METADATAURL' | translate }}</cnsl-label>
          <input cnslInput formControlName="metadataUrl" />
        </cnsl-form-field>
        <cnsl-form-field class="formfield">
          <cnsl-label>{{ 'IDP.SAML.BINDING' | translate }}</cnsl-label>
          <mat-select formControlName="binding">
            <mat-option *ngFor="let binding of bindingValues" [value]="binding">{{ binding }}</mat-option>
          </mat-select>
        </cnsl-form-field>

        <mat-checkbox formControlName="withSignedRequest">{{ 'IDP.SAML.SIGNEDREQUEST' | translate }}</mat-checkbox>
      </div>

      <div class="identity-provider-optional-h-wrapper">
        <h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
        <button (click)="showOptional = !showOptional" type="button" mat-icon-button>
          <mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon
          ><mat-icon *ngIf="!showOptional">keyboard_arrow_down</mat-icon>
        </button>
      </div>
      <div *ngIf="showOptional">
        <div class="transient-info">
          <cnsl-form-field class="formfield">
            <cnsl-label>{{ 'IDP.SAML.SIGNATUREALGORITHM' | translate }}</cnsl-label>
            <mat-select formControlName="signatureAlgorithm">
              <mat-option *ngFor="let signatureAlgorithm of signatureAlgorithmValues" [value]="signatureAlgorithm">{{
                signatureAlgorithm
              }}</mat-option>
            </mat-select>
          </cnsl-form-field>

          <cnsl-form-field class="formfield">
            <cnsl-label>{{ 'IDP.SAML.NAMEIDFORMAT' | translate }}</cnsl-label>
            <mat-select formControlName="nameIdFormat">
              <mat-option *ngFor="let nameIdFormat of nameIDFormatValues" [value]="nameIdFormat">{{
                nameIdFormat
              }}</mat-option>
            </mat-select>
          </cnsl-form-field>

          <cnsl-info-section>
            <div>
              <p class="option-desc">{{ 'IDP.SAML.TRANSIENTMAPPINGATTRIBUTENAME_DESC' | translate }}</p>
            </div>

            <cnsl-form-field class="formfield">
              <cnsl-label>{{ 'IDP.SAML.TRANSIENTMAPPINGATTRIBUTENAME' | translate }}</cnsl-label>
              <input cnslInput formControlName="transientMappingAttributeName" />
            </cnsl-form-field>
          </cnsl-info-section>

          <cnsl-info-section>
            <div>
              <p class="option-desc">{{ 'IDP.FEDERATEDLOGOUTENABLED_DESC' | translate }}</p>
              <mat-checkbox formControlName="federatedLogoutEnabled">{{
                'IDP.FEDERATEDLOGOUTENABLED' | translate
              }}</mat-checkbox>
            </div>
          </cnsl-info-section>
        </div>

        <cnsl-provider-options
          [initialOptions]="provider?.config?.options"
          (optionsChanged)="options = $event"
        ></cnsl-provider-options>
      </div>
      <div class="identity-provider-create-actions">
        <button
          color="primary"
          mat-raised-button
          class="continue-button"
          [disabled]="form.invalid || form.disabled"
          type="submit"
        >
          <span *ngIf="{ exists: (exists$ | async) } as idp">{{
            (!!idp.exists ? 'ACTIONS.SAVE' : 'ACTIONS.CREATE') | translate
          }}</span>
        </button>
      </div>
    </form>
  </div>
</cnsl-create-layout>
